<template>
	<view class="content">
		<u-navbar :border-bottom="false" :custom-back="handleToBack">
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:right>
				<view class="content_status u-flex" @click="statusChange">
					<u-image class="u-m-t-5 u-m-r-20" src="/pages/login/static/status.png" width="36"
						height="36"></u-image>
					我要{{data.utype == 1 ? '求职' : '招聘'}}
				</view>
			</template>
			<!-- #endif -->
		</u-navbar>

		<!-- #ifdef MP-WEIXIN -->
		<view class="content_status" @click="statusChange">
			<u-image class="u-m-r-20" src="/pages/login/static/status.png" width="32" mode="widthFix"></u-image>
			我要{{data.utype == 1 ? '求职' : '招聘'}}
		</view>
		<!-- #endif -->

		<view class="content_main">
			<view class="content_main_tit">
				您好，欢迎登录/注册
			</view>
			<view class="content_main_ipt u-m-t-50" v-if="data.isCode == 1">
				<u-field v-model="data.mobile" type="number" placeholder="请输入手机号" maxlength='11' :label-width="0">
				</u-field>
				<u-field v-model="data.code" type="number" placeholder="请输入验证码" maxlength='4' :label-width="0"
					:clearable="false">
					<template v-slot:right>
						<view class="u-font-12 text" @click="isCaptchaClick(1)">
							{{data.codeText}}
						</view>
					</template>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange" keep-running
					unique-key="login"></u-verification-code>
			</view>
			<view class="content_main_ipt u-m-t-50" v-else>
				<u-field v-model="data.username" placeholder="请输入手机号/用户名/邮箱" :label-width="0">
				</u-field>
				<u-field v-model="data.password" placeholder="请输入密码" :label-width="0" :clearable="false">
				<!-- 	<template v-slot:right>
						<u-icon name="eye-off" size="38"></u-icon>
					</template> -->
				</u-field>
			</view>
			<view class="u-flex u-m-t-40">
				<u-checkbox shape="circle" v-model="data.checkboxValue"></u-checkbox>
				<view class="u-m-l-20" @click="checkboxClick">
					我已阅读并同意
					<text @click.native.stop="toArticle('agreement')">《用户协议》</text>
					<text @click.native.stop="toArticle('privacy')">《隐私政策》</text>
				</view>
			</view>

			<view class="u-m-t-80">
				<u-button throttle-time="1000" :ripple="false" hover-class="none" :hair-line="false"
					:custom-style="data.customStyle" @click="login(2)">{{data.utype == 1 ? '招聘者' : '求职者'}}登录</u-button>

				<view class="content_text" @click="changeCode">
					{{data.isCode == 1 ? '账号密码登录' : '验证码登录'}}
				</view>
			</view>
		</view>
		<view class="content_fotter">
			<u-divider>或通过以下方式登录</u-divider>
			<view class="content_fotter_image" @click="handleToWechatLogin">
				<u-image src="@/static/home/wx.png" :width="90" :height="90"></u-image>
			</view>
		</view>
		<u-captcha v-model="data.isCaptcha" @cancel="data.isCaptcha = false" @confirm="handleCaptcha"></u-captcha>
	</view>


	<!-- #ifdef MP-WEIXIN -->
	<!-- 阻止返回 -->
	<view v-if="data.isShow">
		<page-container :show="data.isShow" :overlay="false" @beforeleave="beforeleave">

		</page-container>
	</view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		reactive
	} from "vue";
	import {
		useUserStore
	} from '@/stores/userInfo'
	import {
		useUserIm
	} from '@/stores/userIm'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	const pageInstance = getCurrentInstance()
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		// 手机号
		mobile: '',
		// 验证码
		code: '',
		// 是否勾选用户协议
		checkboxValue: false,
		// 验证码校验
		codeText: '',
		// 账号
		username:'',
		// 密码
		password:'',
		customStyle: {
			backgroundColor: '#00D075',
			border: 'none',
			color: '#fff'
		},
		isCaptcha: false,
		isShow: true,
		type: 0,
		// 是否验证码登录
		isCode: 1
	})
	// 登录数据
	const getUser = useUserStore()
	// IM数据
	const IM = useUserIm()
	onLoad(({
		utype
	}) => {
		data.utype = utype || uni.getStorageSync('utype')
	})
	const beforeleave = () => {
		data.isShow = false
		uni.showModal({
			title: '确定要退出吗？',
			success: (e) => {
				if (e.confirm) {
					if (!getUser.isLogin) {
						handleToBack()
					}
				} else {
					data.isShow = true
				}
			}
		})
	}
	// 返回上一页
	const handleToBack = () => {
		var pages = getCurrentPages();
		var page = pages[pages.length - 2];
		if (page == undefined) {
			uni.$u.route({
				type: 'reLaunch',
				url: '/pages/login/status'
			})
			return
		}
		// #ifdef MP-WEIXIN
		if (page.$page.fullPath == '/pages/message/list' || page.$page.fullPath == '/pages/personal/index') {
			uni.$u.route({
				type: 'tab',
				url: '/pages/home/home'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
		// #endif
		// #ifndef MP-WEIXIN
		if (page.$page.path == '/pages/message/list' || page.$page.path == '/pages/personal/index') {
			uni.$u.route({
				type: 'tab',
				url: '/pages/home/home'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
		// #endif
	}
	// #ifdef APP-PLUS
	onUnload(() => {
		if (!getUser.isLogin) {
			handleToBack()
		}
	})
	// #endif
	// 切换账号密码/验证码登录
	const changeCode = () => {
		data.isCode = data.isCode ? 0 : 1
	}
	// 验证码弹窗
	const isCaptchaClick = (val) => {
		if (!uni.$u.test.mobile(data.mobile)) return uni.$u.toast('请输入正确的手机号')
		if (pageInstance.refs.uCode.canGetCode) {
			data.type = val
			data.isCaptcha = true
		}
	}
	// 微信登录
	const handleToWechatLogin = () => {
		uni.login({
			"provider": "weixin",
			success: async (event) => {
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success: async (infoRes) => {
						console.log(infoRes);
						let params = {
							openId:infoRes.userInfo.openId,
							unionId:infoRes.userInfo.unionId,
							nickName:infoRes.userInfo.nickName,
							avatarUrl:infoRes.userInfo.avatarUrl
						}
						let config = {
							custom: {
								loading: true
							}
						}
						let res = await uni.$u.api.getWxLogin(params, config)
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('next_code', res.next_code)
						uni.setStorageSync('utype', data.utype)
						await getUser.getUserInfo()
						await IM.setImToken()
						uni.$u.toast('登录成功')
						if (res.next_code == 50007) { //没有简历信息
							uni.$u.route({
								type: 'reLaunch',
								url: 'pages/pagesPersonal/Initial/Initial'
							})
						} else if (res.next_code == 50003) { // 没有企业信息
							uni.$u.route('/pages/pagesPersonal/companyInfo/initCompanyInfo')
						} else if (res.next_code == 50005) { // 简历信息不完整
							uni.$u.route({
								type: 'reLaunch',
								url: '/pages/pagesPersonal/myResume/myResume'
							})
						} else {
							var pages = getCurrentPages();
							var page = pages[pages.length - 2];
							if (page == undefined) {
								uni.$u.route({
									type: 'tab',
									url: '/pages/home/home'
								})
								return
							}
							// #ifdef MP-WEIXIN
							if (page.$page.fullPath == '/pages/home/home' || page.$page.fullPath == '/pages/message/list' ||
								page.$page.fullPath == '/pages/personal/index') {
								uni.$u.route({
									type: 'tab',
									url: page.$page.fullPath
								})
							} else {
								uni.$u.route({
									type: 'redirect',
									url: page.$page.fullPath
								})
							}
							// #endif
							// #ifndef MP-WEIXIN
							uni.$u.route({
								type: 'back'
							})
							// #endif
						}
					}
				});
			},
			fail: function(err) {
				// 登录授权失败  
				// err.code是错误码
			}
		})
	}
	// 点击登录
	const login = async (val) => {
		if(data.isCode == 1){
			if (!uni.$u.test.mobile(data.mobile)) return uni.$u.toast('请输入正确的手机号')
			if (!uni.$u.test.code(data.code, 4)) return uni.$u.toast('请输入正确的验证码')
			if (!data.checkboxValue) return uni.$u.toast('请勾选服务条款')
			data.type = val
			data.isCaptcha = true
		}else{
			if (uni.$u.test.isEmpty(data.username)) return uni.$u.toast('请输入手机号/用户名/邮箱')
			if (uni.$u.test.isEmpty(data.password)) return uni.$u.toast('请输入密码')
			if (!data.checkboxValue) return uni.$u.toast('请勾选服务条款')
			// 登录
			let params = {
				username: data.username,
				password: data.password,
				utype: data.utype
			}
			let config = {
				custom: {
					loading: true
				}
			}
			let res = await uni.$u.api.getPasswordLogin(params, config)
			uni.setStorageSync('token', res.token)
			uni.setStorageSync('next_code', res.next_code)
			uni.setStorageSync('utype', data.utype)
			await getUser.getUserInfo()
			await IM.setImToken()
			uni.$u.toast('登录成功')
			if (res.next_code == 50007) { //没有简历信息
				uni.$u.route({
					type: 'reLaunch',
					url: 'pages/pagesPersonal/Initial/Initial'
				})
			} else if (res.next_code == 50003) { // 没有企业信息
				uni.$u.route('/pages/pagesPersonal/companyInfo/initCompanyInfo')
			} else if (res.next_code == 50005) { // 简历信息不完整
				uni.$u.route({
					type: 'reLaunch',
					url: '/pages/pagesPersonal/myResume/myResume'
				})
			} else {
				var pages = getCurrentPages();
				var page = pages[pages.length - 2];
				if (page == undefined) {
					uni.$u.route({
						type: 'tab',
						url: '/pages/home/home'
					})
					return
				}
				// #ifdef MP-WEIXIN
				if (page.$page.fullPath == '/pages/home/home' || page.$page.fullPath == '/pages/message/list' ||
					page.$page.fullPath == '/pages/personal/index') {
					uni.$u.route({
						type: 'tab',
						url: page.$page.fullPath
					})
				} else {
					uni.$u.route({
						type: 'redirect',
						url: page.$page.fullPath
					})
				}
				// #endif
				// #ifndef MP-WEIXIN
				uni.$u.route({
					type: 'back'
				})
				// #endif
			}
		}
	}
	// 验证码倒计时
	const codeChange = (text) => {
		data.codeText = text;
	}
	// 验证码弹窗
	const handleCaptcha = async (value) => {
		// 获取验证码
		if (data.type == 1) {
			let params = {
				mobile: data.mobile,
				utype: data.utype,
				captcha: value
			}
			let config = {
				custom: {
					loading: true
				}
			}
			let res = await uni.$u.api.getPhoneCode(params, config)
			data.isCaptcha = false
			uni.$u.toast('验证码已发送')
			pageInstance.refs.uCode.start();
		} else {
			// 登录
			let params = {
				mobile: data.mobile,
				code: data.code,
				utype: data.utype,
				captcha: value
			}
			let config = {
				custom: {
					loading: true
				}
			}
			let res = await uni.$u.api.getPhoneLogin(params, config)
			data.isCaptcha = false
			uni.setStorageSync('token', res.token)
			uni.setStorageSync('next_code', res.next_code)
			uni.setStorageSync('utype', data.utype)
			await getUser.getUserInfo()
			await IM.setImToken()
			uni.$u.toast('登录成功')
			if (res.next_code == 50007) { //没有简历信息
				uni.$u.route({
					type: 'reLaunch',
					url: 'pages/pagesPersonal/Initial/Initial'
				})
			} else if (res.next_code == 50003) { // 没有企业信息
				uni.$u.route('/pages/pagesPersonal/companyInfo/initCompanyInfo')
			} else if (res.next_code == 50005) { // 简历信息不完整
				uni.$u.route({
					type: 'reLaunch',
					url: '/pages/pagesPersonal/myResume/myResume'
				})
			} else {
				var pages = getCurrentPages();
				var page = pages[pages.length - 2];
				if (page == undefined) {
					uni.$u.route({
						type: 'tab',
						url: '/pages/home/home'
					})
					return
				}
				// #ifdef MP-WEIXIN
				if (page.$page.fullPath == '/pages/home/home' || page.$page.fullPath == '/pages/message/list' ||
					page.$page.fullPath == '/pages/personal/index') {
					uni.$u.route({
						type: 'tab',
						url: page.$page.fullPath
					})
				} else {
					uni.$u.route({
						type: 'redirect',
						url: page.$page.fullPath
					})
				}
				// #endif
				// #ifndef MP-WEIXIN
				uni.$u.route({
					type: 'back'
				})
				// #endif
			}
		}
	}
	// 去用户协议或隐私政策页
	const toArticle = (type) => {
		uni.$u.route('/pages/pagesHome/article/article', {
			type
		})
	}
	// 点击选择隐私政策
	const checkboxClick = () => {
		data.checkboxValue = !data.checkboxValue
	}
	// 切换用户身份
	const statusChange = () => {
		data.utype = data.utype == 1 ? 2 : 1
	}
</script>

<style lang="scss" scoped>
	.content {
		&_status {
			/* #ifndef MP-WEIXIN */
			width: 200rpx;
			color: #00D075;
			font-size: 28rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			align-items: center;
			justify-content: flex-end;
			display: flex;
			color: #00D075;
			font-size: 28rpx;
			padding: 10rpx 40rpx;
			/* #endif */
		}

		&_main {
			margin-top: 60rpx;
			width: 100vw;
			padding: 0 80rpx;
			box-sizing: border-box;
			font-size: 24rpx;

			:deep(.u-field) {
				padding: 20rpx 0;
			}

			:deep(.u-checkbox) {
				display: block !important;
			}

			&_tit {
				font-size: 38rpx;
				font-weight: bold;
			}

			text,
			.text {
				color: #00D075;
			}
		}

		&_text {
			color: #00D075;
			text-align: center;
			margin-top: 22rpx;
			font-size: 28rpx;
		}
		
		&_fotter{
			position: fixed;
			bottom: 56rpx;
			left: 0;
			right: 0;
			margin: auto;
			&_image{
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-top: 56rpx;
			}
		}

		/* #ifdef MP-WEIXIN */
		&_wx {
			position: fixed;
			bottom: 120rpx;
			width: 100vw;

			&_image {
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}

		/* #endif */
	}
</style>